<template>
  <div class="ly-foot">
    <div class="foot-wrap">


      <div class="link-box">

        <div class="link-item link-item-left">
          <span class="bt">bilibili</span>
          <div class="link-item-panel">
            <a target="_blank" href="//www.bilibili.com/blackboard/aboutUs.html">关于我们</a>
            <a target="_blank" href="//www.bilibili.com/blackboard/contact.html">联系我们</a>
            <a target="_blank" href="//www.bilibili.com/protocal/licence.html">用户协议</a>
            <a target="_blank" href="//www.bilibili.com/blackboard/join.html">加入我们</a>
            <a target="_blank" href="//www.bilibili.com/blackboard/friends-links.html">友情链接</a>
            <a target="_blank" href="//www.bilibili.com/blackboard/privacy-pc.html">隐私协议</a>
            <a target="_blank" href="//account.bilibili.com/account/official/home">bilibili认证</a>
            <a target="_blank" href="//ir.bilibili.com/">Investor Relations</a></div>
        </div>

        <div class="link-item link-item-center">
          <span class="bt">传送门</span>
          <div class="link-item-panel">
            <a target="_blank" href="//www.bilibili.com/blackboard/topic/activity-cn8bxPLzz.html">协议汇总</a>
            <a target="_blank" href="//www.bilibili.com/blackboard/activity-list.html">活动中心</a>
            <a target="_blank" href="//www.bilibili.com/blackboard/topic_list.html">活动专题页</a>
            <a target="_blank" href="//www.bilibili.com/v/copyright/intro/">侵权申诉</a>
            <a target="_blank" href="//www.bilibili.com/blackboard/help.html">帮助中心</a>
            <a target="_blank" href="https://www.bilibili.com/blackboard/activity-5zJxM3spoS.html">社区中心</a>
            <a target="_blank" href="//space.bilibili.com/6823116#/album">壁纸站</a>
            <a target="_blank" href="//e.bilibili.com/">广告合作</a>
            <a target="_blank" href="//www.bilibili.com/blackboard/activity-S1jfy69Jz.html">名人堂</a>
            <a target="_blank" href="//mcn.bilibili.com/studio/mcn/entry">MCN管理中心</a>
            <a target="_blank" href="//www.bilibili.com/video/BV1Xx411c7cH/">高级弹幕</a>
            <a target="_blank" href="//b.bilibili.com/">品牌号官网</a>
          </div>
        </div>

        <div class="link-item link-item-right">

          <div class="qrcode-wrapper">
            <a href="//app.bilibili.com/" target="_blank" class="qrcode-wrapper-one">
              <span class="icon">

              </span>
              <p class="qrcode-title">下载APP</p>
            </a>
          </div>

          <div class="qrcode-wrapper">
            <a href="//love.bilibili.com/" target="_blank" class="qrcode-wrapper-two">
              <span class="icon">

              </span>
              <p class="qrcode-title">公益</p>
            </a>
          </div>

          <div class="qrcode-wrapper">
            <a href="//weibo.com/bilibiliweb" target="_blank" class="qrcode-wrapper-three">
              <span class="icon">

              </span>
              <p class="qrcode-title">官方微博</p>
            </a>
          </div>

          <div class="qrcode-wrapper">
            <div class="qrcode-wrapper-four">
              <span class="icon">

              </span>
              <p class="qrcode-title">官方微信</p>
            </div>
          </div>

        </div>


      </div>


      <div class="split-line"></div>


      <div class="other-link">
        <div class="text-con">

<!--          <div class="text-con__line">-->
<!--            <a class="text-con__line&#45;&#45;link" href="//i0.hdslb.com/bfs/activity-plat/static/20210302/fd61576fc72dac89e5e7763dfd8d7bc7/JzUN7b8Ek.png" target="_blank">营业执照</a>-->
<!--            <span class="text-con__line&#45;&#45;link">信息网络传播视听节目许可证：0910417</span><span class="text-con__line&#45;&#45;link">网络文化经营许可证 沪网文【2019】3804-274号</span>-->
<!--            <span class="text-con__line&#45;&#45;link">广播电视节目制作经营许可证：（沪）字第01248号</span>-->
<!--            <span class="text-con__line&#45;&#45;link">增值电信业务经营许可证 沪B2-20100043</span>-->
<!--          </div>-->

          <div class="text-con__line">
            <a class="text-con__line--link" href="http://beian.miit.gov.cn/">互联网ICP备案：豫ICP备2021012533号-1</a>
<!--            <span class="text-con__line&#45;&#45;link">出版物经营许可证 沪批字第U6699 号</span>-->
<!--            <span class="text-con__line&#45;&#45;link">互联网药品信息服务资格证 沪-非经营性-2016-0143</span>-->
<!--            <span class="text-con__line&#45;&#45;link">营业性演出许可证 沪市文演（经）00-2253 |</span>-->
          </div>

<!--          <div class="text-con__line">-->
<!--            <a class="text-con__line&#45;&#45;link" href="mailto:help@bilibili.com" target="_blank">不良信息举报邮箱：help@bilibili.com</a>-->
<!--            <a class="text-con__line&#45;&#45;link" href="mailto:teenprotect@bilibili.com" target="_blank">涉未成年举报邮箱：teenprotect@bilibili.com</a>-->
<!--            <span class="text-con__line&#45;&#45;link">不良信息举报电话：4006262233转1</span>-->
<!--            <div class="sprite bg1"></div>-->
<!--            <a class="text-con__line&#45;&#45;link" href="http://www.shjbzx.cn/" target="_blank">上海互联网举报中心 |</a>-->
<!--            <a class="text-con__line&#45;&#45;link" href="//jbts.mct.gov.cn/" target="_blank">12345政务服务便民热线 |</a>-->
<!--          </div>-->

<!--          <div class="text-con__line">-->
<!--            <div class="sprite bg2"></div>-->
<!--            <a class="text-con__line&#45;&#45;link" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=31011002002436" target="_blank">沪公网安备31011002002436号 |</a>-->
<!--            <a class="text-con__line&#45;&#45;link" href="mailto:userreport@bilibili.com" target="_blank">儿童色情信息举报专区 |</a>-->
<!--            <a class="text-con__line&#45;&#45;link" href="http://www.shdf.gov.cn/shdf/channels/740.html" target="_blank">扫黄打非举报</a>-->
<!--          </div>-->

<!--          <div class="text-con__line">-->
<!--            <span class="text-con__line&#45;&#45;link">网上有害信息举报专区：</span>-->
<!--            <div class="sprite bg3"></div>-->
<!--            <a class="text-con__line&#45;&#45;link" href="https://www.12377.cn/" target="_blank">中国互联网违法和不良信息举报中心</a>-->
<!--            <span class="text-con__line&#45;&#45;link">亲爱的市民朋友，上海警方反诈劝阻电话“96110”系专门针对避免您财产被骗受损而设，请您一旦收到来电，立即接听。</span>-->
<!--          </div>-->

<!--          <div class="text-con__line">-->
<!--            <span class="text-con__line&#45;&#45;link">公司名称：上海宽娱数码科技有限公司 |</span>-->
<!--            <span class="text-con__line&#45;&#45;link">公司地址：上海市杨浦区政立路485号 |</span>-->
<!--            <span class="text-con__line&#45;&#45;link">电话：021-25099888</span>-->
<!--          </div>-->


          <div class="text-con__line">
            <a class="text-con__line--link" href="https://baidurank.aizhan.com/" target="_blank">
              <span>百度权重:</span>
              <img style="vertical-align:middle" src="https://baidurank.aizhan.com/api/br?domain=meishibiexuejava.cn&style=images" />
            </a>


            <a class="text-con__line--link" href="https://baidurank.aizhan.com/" target="_blank">
              <span>移动权重:</span>
              <img style="vertical-align:middle" src="https://baidurank.aizhan.com/api/mbr?domain=meishibiexuejava.cn&style=images" />
            </a>

          </div>
        </div>
      </div>


      <div class="footer-icons">
<!--        <img src="../../../assets/foot-1.png" width="96" height="39">-->
<!--        <img src="../../../assets/foot-3.png" width="96" height="39">-->
<!--        <img src="../../../assets/foot-2.png" width="96" height="39">-->
      </div>


    </div>
  </div>
</template>

<script>
export default {
  name: "Foot"
}
</script>

<style scoped>


.ly-foot {
  z-index: 1;
  position: relative;
  padding: 30px 0;
  min-width: 999px;
  background-color: #f6f7f8;
  font-size: 12px;
}

.ly-foot a {
  color: #18191c;
  text-decoration: none;
  transition: color .3s;
}

.ly-foot p {
  margin-top: 10px;
  height: 20px;
  color: #18191c;
  transition: color .2s;
}


.foot-wrap {

}

.link-box {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
  font-size: 14px;
}


.link-item {

}

.link-item .bt {
  display: block;
  margin-bottom: 10px;
  height: 20px;
  color: #9499a0;
  font-size: 16px;
}

.link-item-panel > a {
  display: inline-block;
  margin-right: 12px;
  margin-bottom: 4px;
  line-height: 24px;
  color: #18191c;
}


.link-item-left {
  width: 350px;
}

.link-item-center {
  width: 450px;
}

.link-item-right {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-right: 0;
  padding-right: 0;
  border-right: none;
  flex-shrink: 0;
}


.qrcode-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 22px;
}

.qrcode-wrapper .icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.qrcode-wrapper .icon svg {
  color: #fff;
}

.qrcode-wrapper-one .icon {
  background-color: #3752c8;
}

.qrcode-wrapper-two .icon {
  background-color: #00aeec;
}

.qrcode-wrapper-three .icon {
  background-color: #db4437;
}

.qrcode-wrapper-four .icon {
  background-color: #57bb40;
}

.qrcode-wrapper .qrcode-title {
  text-align: center;
  white-space: nowrap;
}


.split-line {
  margin: 0 auto;
  width: 80%;
  height: 1px;
  background-color: #e3e5e7;
}


.other-link {
  display: flex;
  margin-bottom: 20px;
  padding-top: 30px;
  color: #9499a0;
}

.other-link a {
  color: #9499a0;
}

.other-link .text-con {
  flex-shrink: 0;
  margin: 0 auto;
  width: 1086px;
  text-align: center;
}

.text-con__line--link {
  margin-right: 8px;
  color: #9499a0;
  text-align: center;
  font-size: 12px;
  line-height: 24px;
}


.sprite.bg1 {
  width: 16px;
  height: 16px;
  background-position: 0 -2px;
}

.sprite.bg2 {
  width: 18px;
  height: 20px;
  background-position: -41px 0px;
}

.sprite.bg3 {
  width: 16px;
  height: 16px;
  background-position: -18px -3px;
}

.sprite {
  display: inline-block;
  margin-right: 3px;
  background-image: url("../../../assets/ly-icon.png");
  background-repeat: no-repeat;
  vertical-align: middle;
}





.footer-icons{
  margin: 0 auto;
  width: 400px;
}
.footer-icons>img {
  display: inline-block;
  margin-right: 20px;
}
body img {
  border-style: none;
}




@media (min-width: 1701px) and (max-width: 2199.9px) {
  .foot-wrap {
    padding: 0 193px;
    margin: 0 auto;
  }


}

@media (min-width: 1367px) and (max-width: 1700.9px){
  .foot-wrap {
    margin: 0 56px;
  }


}



@media (min-width: 1100px) and (max-width: 1366.9px){
  .foot-wrap {
    margin: 0 56px;
  }
  .qrcode-wrapper{
    margin: 0 8px;
  }
}


@media (max-width: 1099.9px){
  .foot-wrap {
    margin: 0 15px;
    min-width: 1000px;
  }
  .link-box{
    margin: 0 30px;
  }
  .qrcode-wrapper{
    margin: 0 8px;
  }
}




</style>
